const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 模式
    mode: 'development',
    // 入口  多个
    entry: {
        base: './src/base.js',
        login: './src/pages/login/index.js',
        userAdd: './src/pages/userAdd/index.js',
        users: './src/pages/users/index.js',
        userUpdate: './src/pages/userUpdate/index.js',
    },

    // 输出
    output: {
        path: path.resolve(__dirname, 'dist'), // 所有打包文件所在的根目录
        filename: 'js/[name]_[contenthash:8].js', // 打包生成的js文件 (可以带目录)
        clean: true, // 打包时, 先自动清除打包文件夹
    },

    plugins: [ // 创建打包页面的多个plugin
        new HtmlWebpackPlugin({
            template: "./src/pages/login/index.html",// 指定模板文件。
            filename: 'login.html',// 生成的打包页面文件名
            chunks: ['base', 'login'], // 引入的js包名
            inject: "body",// 将打包生成的JS文件放置在body尾部
        }),
        new HtmlWebpackPlugin({
            template: "./src/pages/userAdd/index.html",
            filename: 'userAdd.html',
            chunks: ['base', 'userAdd'],
            inject: "body",
        }),
        new HtmlWebpackPlugin({
            template: "./src/pages/users/index.html",
            filename: 'users.html',
            chunks: ['base', 'users'],
            inject: "body",
        }),
        new HtmlWebpackPlugin({
            template: "./src/pages/userUpdate/index.html",
            filename: 'userUpdate.html',
            chunks: ['base', 'userUpdate'],
            inject: "body",
        }),
        new HtmlWebpackPlugin({
            template: "./src/pages/index/index.html",
            filename: 'index.html',
            chunks: ['base'],
            inject: "body",
        }),
    ],

    // 配置 loader
    module: {
        rules: [
            // 处理JS文件 ES6 => ES5
            {
                test: /\.js$/,
                exclude: /node_modules/, // 不进行处理的文件夹
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    useBuiltIns: 'usage', // 只打包使用的ES6新API的实现代码
                                    corejs: { version: 2 } // 指定core-js的版本号为2
                                }
                            ]
                        ],
                        plugins: [], // 指定babel插件包
                    }
                }
            },

            // 处理css文件
            {
                test: /\.css$/,  // 配置css文件的正则
                // 1. 每个loader就是一个处理函数
                // 2. 多个loader, 从下向上依次执行
                use: [
                    'style-loader', // js文件 => 页面的style标签
                    'css-loader'  // css文件 => js文件
                ]
            },

            // 处理art文件
            {
                test: /\.art$/,
                loader: "art-template-loader",
            },
        ]
    },


    // 开发服务器
    devServer: {
        port: 3001, // 端口号
        open: true, // 自动打开浏览器
        // 服务器代理
        // proxy: { // 以/api开头的请求, 都由代理服务器转发到接口服务器
        //     // "/api": "http://localhost:8082"
        //     "/api": { // 处理以/api开头的请求
        //         target: "http://localhost:8081", // 转发的目标接口基础地址
        //         pathRewrite: { // 在转发请求时去掉 /api
        //             "^/api": ""
        //         }
        //     }
        // },
    },
}